import { activityActiveArticle } from '@/services/api/api-home';
import { Avatar, Card, List } from 'antd';
import moment from 'moment';
import { useEffect, useState } from 'react';
import { Link } from '@umijs/max';
import styles from '../../style.less';
import DetailsActive from '@/pages/cues/active/components/DetailsActive';

interface ActivityActiveArticleProps {
  title: string;
  type: string | undefined;
  value?: any;
  onChange?: (value: any) => void;
}

const ActivityActiveArticle: React.FC<ActivityActiveArticleProps> = ({
  title,
  type,
  value,
  onChange,
}) => {
  /**
   * 市级部门上报选题
   */
  const [activityData, setActivityDataState] = useState<CuesActiveData.ActivePage[]>();

  useEffect(() => {
    activity();
  }, []);

  const activity = async () => {
    const response = await activityActiveArticle({
      articleOrganizationType: type,
    });
    if (response.code == 0) {
      setActivityDataState(response.data.data);
    }
  };

  const renderActivities = (item: CuesActiveData.ActivePage) => {
    return (
      <List.Item key={item.id}>
        <List.Item.Meta
          avatar={<Avatar src={item.articleOrganizationAvatar} />}
          title={
            <span>
              <a className={styles.username}>{item.articleOrganizationName}</a>

              <span className={styles.event}>
                主动报送
                <DetailsActive
                  id={item.id}
                  name={item.articleName}
                  onRefurbish={() => {
                    // actionRef?.current?.reload();
                  }}
                />
              </span>
            </span>
          }
          description={
            <span className={styles.datetime} title={item.createdTime}>
              {moment(item.createdTime).fromNow()}
            </span>
          }
        />
      </List.Item>
    );
  };

  return (
    <>
      {activityData && (
        <>
          <Card
            bodyStyle={{ padding: 0 }}
            bordered
            className={styles.activeCard}
            title={title}
            extra={
              <Link
                // to={
                //   type.length > 0
                //     ? {
                //         pathname: '/active',
                //         search: `?articleOrganizationTypes=${type == 'bwb' ? 3 : 4}`,
                //       }
                //     : '/active'
                // }
                to="/active"
              >
                全部
              </Link>
            }
          >
            <List
              renderItem={(item) => renderActivities(item)}
              dataSource={activityData}
              className={styles.activitiesList}
              size="large"
            />
          </Card>
          <br />
        </>
      )}
    </>
  );
};

export default ActivityActiveArticle;
